<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="counter">父组件{{count}}</div>
			<counter :count='count' @count-add="countAdd"></counter>
		</div>
	</body>
</html>
<script>
	//事件传递:子组件向父组件传递
	//父组件向子组件传递的值是单向的,不可在子组件中修改
	const app = Vue.createApp({
		data(){
			return{
				count:10
			}
		},
		methods:{
			countAdd(val,val1){
				//也可以传递参数
				console.log(val,val1)
				this.count += 1
			}
		}
	});
	app.component('counter',{
		props:['count'],
		//事件声明
		emits:['countAdd'],
		methods:{
			//事件传递语法
			changeCount(){
				this.$emit('countAdd',this.count+1,this.count+2)
			}
		},
		template:
		`
			<div>子组件{{count}}</div>
			<button @click="changeCount">修改count</button>
		`
	});
	const vm = app.mount("#app")
</script>